<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>夸父名片海报背景图</title>
    <link href="https://file.51kuafu.com/0c/5e/d985fdbddc027124d4e6879ce1a1860832cda85e2b517c18d8fbd2fffc06.css?bootstrap.min.css" rel="stylesheet">
    <link href="https://file.51kuafu.com/b2/2c/8ea45fe905650f8087108b5ed32c1923bcd80d400adc9b0241f18be40208.css?bootstrap-datepicker.min.css" rel="stylesheet">
    <script src="https://file.51kuafu.com/ff/15/23fb7389539c84c65aba19260648793bb4f5e29329d2ee8804bc37a3fe6e.js?jquery.min.js"></script>
    <script src="https://file.51kuafu.com/7e/02/c082fedfc821a8a51fe004dab6896dd928876a21ccac8675142c2e2f7b1f.js?bootstrap.bundle.min.js"></script>
    <script src="https://file.51kuafu.com/6e/a5/5ea86749ee1fe560fabac6b3effd81b33046fa74dc657e24d41d28110a9f.js?bootstrap-datepicker.min.js"></script>
    <script src="https://file.51kuafu.com/b4/c3/0f02638b91ebf14a458a03d143082df12dada8e0bb02a33248b5469a6df0.js?bootstrap-datepicker.zh-CN.min.js"></script>
</head>
<style>
    .mui-switch {
        width: 52px;
        height: 31px;
        position: relative;
        border: 1px solid #dfdfdf;
        background-color: #fdfdfd;
        box-shadow: #dfdfdf 0 0 0 0 inset;
        border-radius: 20px;
        border-top-left-radius: 20px;
        border-top-right-radius: 20px;
        border-bottom-left-radius: 20px;
        border-bottom-right-radius: 20px;
        background-clip: content-box;
        display: inline-block;
        -webkit-appearance: none;
        user-select: none;
        outline: none; }
    .mui-switch:before {
        content: '';
        width: 29px;
        height: 29px;
        position: absolute;
        top: 0px;
        left: 0;
        border-radius: 20px;
        border-top-left-radius: 20px;
        border-top-right-radius: 20px;
        border-bottom-left-radius: 20px;
        border-bottom-right-radius: 20px;
        background-color: #fff;
        box-shadow: 0 1px 3px rgba(0, 0, 0, 0.4); }
    .mui-switch:checked {
        border-color: #64bd63;
        box-shadow: #64bd63 0 0 0 16px inset;
        background-color: #64bd63; }
    .mui-switch:checked:before {
        left: 21px; }
    .mui-switch.mui-switch-animbg {
        transition: background-color ease 0.4s; }
    .mui-switch.mui-switch-animbg:before {
        transition: left 0.3s; }
    .mui-switch.mui-switch-animbg:checked {
        box-shadow: #dfdfdf 0 0 0 0 inset;
        background-color: #64bd63;
        transition: border-color 0.4s, background-color ease 0.4s; }
    .mui-switch.mui-switch-animbg:checked:before {
        transition: left 0.3s; }
    .mui-switch.mui-switch-anim {
        transition: border cubic-bezier(0, 0, 0, 1) 0.4s, box-shadow cubic-bezier(0, 0, 0, 1) 0.4s; }
    .mui-switch.mui-switch-anim:before {
        transition: left 0.3s; }
    .mui-switch.mui-switch-anim:checked {
        box-shadow: #64bd63 0 0 0 16px inset;
        background-color: #64bd63;
        transition: border ease 0.4s, box-shadow ease 0.4s, background-color ease 1.2s; }
    .mui-switch.mui-switch-anim:checked:before {
        transition: left 0.3s; }
</style>
<body>

<div class="container-fluid">
    {{--    <div class="alert alert-danger" role="alert" id="msg">
            {{$msg}}
        </div>--}}
    <div class="jumbotron alert-primary">
        <h3 class="display-4"><b>夸父名片海报背景图列表</b></h3>
        <p class="lead">您可以上传背景图片供生成海报使用</p>
        <hr class="my-4">
        <p>图片上传提供排序，以降序的方式进行排列</p>
        <a class="btn btn-warning btn-lg" data-toggle="collapse" href="#collapseExample" role="button" aria-expanded="false" aria-controls="collapseExample">
            上传图片
        </a>
        <a class="btn btn-info btn-lg" data-toggle="collapse" href="#announcement" role="button" aria-expanded="false" aria-controls="announcement" style="margin-left: 30px">
            签约奖励公告
        </a>
        <a class="btn btn-secondary btn-lg" data-toggle="collapse" href="#rule" role="button" aria-expanded="false" aria-controls="rule" style="margin-left: 30px">
            邀请规则描述
        </a>
        <a class="btn btn-dark btn-lg" data-toggle="collapse" href="#homeImg" role="button" aria-expanded="false" aria-controls="homeImg" style="margin-left: 30px">
            推荐夸父主页图片
        </a>
        <a class="btn btn-danger btn-lg" data-toggle="collapse" href="#detailImg" role="button" aria-expanded="false" aria-controls="detailImg" style="margin-left: 30px">
            推荐夸父详情图片
        </a>

        <div class="collapse" id="collapseExample">
            <form method="post" action="background/save" enctype="multipart/form-data">
                <div class="form-group">
                    <label for="exampleFormControlFile1"></label>
                    <input type="file" class="form-control-file" name="file" id="exampleFormControlFile1">
                    <small id="passwordHelpBlock" class="form-text text-muted">
                        请上传宽度为750像素的图片
                    </small>
                    <br>
                    <input type="number" style="width: 20%" class="form-control" name="sort" id="inlineFormInput" placeholder="请输入图片权重，越大越靠前">
                    <br>
                    <input type="text" style="width: 20%" class="form-control" name="type" id="" placeholder="请输入分类">
                </div>
                <div style="width: 300px">
                    <div class="input-group input-daterange">
                        <div class="input-group mb-2 mr-sm-2">
                            <div class="input-group-prepend">
                                <div class="input-group-text ">开始时间</div>
                            </div>
                            <input type="text" class="form-control start-date-input" name="startDate">
                        </div>
                        <div class="input-group mb-2 mr-sm-2">
                            <div class="input-group-prepend">
                                <div class="input-group-text">结束时间</div>
                            </div>
                            <input type="text" class="form-control end-date-input" name="endDate">

                        </div>
                        <small id="passwordHelpBlock" class="form-text text-muted">
                            如果不选 默认7天
                        </small>
                    </div>
                </div>
                <br>
                <div class="custom-control custom-switch">
                    <input type="checkbox" class="custom-control-input" id="customSwitch1" name="isInternalUse" value="1">
                    <label class="custom-control-label" for="customSwitch1">是否仅内部员工使用</label>
                </div>
                <br>
                <button type="submit" class="btn btn-primary" id="liveToastBtn">上传</button>
            </form>
        </div>
        <div class="collapse" id="announcement">
            <br>
            <form method="post" action="background/announcementSave">
                <div class="row">
                    <div class="col">
                        <textarea class="form-control announcementName" name="announcement" cols="30" rows="10">{{$announcement}}</textarea>
                    </div>
                </div>
                <br>
                <button type="button" class="btn btn-primary announcement" id="liveToastBtn">提交</button>
            </form>
        </div>
        <div class="collapse" id="rule">
            <br>
            <form method="post" action="background/ruleSave">
                <div class="row">
                    <div class="col">
                        <textarea class="form-control ruleName" name="rule" cols="30" rows="10">{{$rule}}</textarea>
                    </div>
                </div>
                <br>
                <button type="button" class="btn btn-primary rule" id="liveToastBtn">提交</button>
            </form>
        </div>
        <div class="collapse" id="homeImg">
            <br>
            <form method="post" action="homeImg/save">
                <div class="row">
                    <div class="col">
                        <textarea class="form-control homeImgValue" name="rule" cols="30" rows="10">{{$homeImg}}</textarea>
                    </div>
                </div>
                <br>
                <button type="button" class="btn btn-primary homeImg" id="liveToastBtn">提交</button>
            </form>
        </div>
        <div class="collapse" id="detailImg">
            <br>
            <form method="post" action="detailImg/save">
                <div class="row">
                    <div class="col">
                        <textarea class="form-control detailImgValue" name="rule" cols="30" rows="10">{{$detailImg}}</textarea>
                    </div>
                </div>
                <br>
                <button type="button" class="btn btn-primary detailImg" id="liveToastBtn">提交</button>
            </form>
        </div>
    </div>

    <form method="get" action="background">
        <div class="form-row align-items-center">
            <div class="col-auto my-1">
                <select class="custom-select mr-sm-2" name="type" id="inlineFormCustomSelect">
                    <option selected value="">请选择分类</option>
                    @foreach($select as $k => $item)
                        <option value="{{$item}}">{{$item}}</option>
                    @endforeach
                </select>
            </div>
            <div class="col-auto my-1">
                <button type="submit" class="btn btn-primary">搜索</button>
            </div>
        </div>
    </form>
    <br>
    <table class="table  table-hover table-bordered">
        <thead class="thead-dark">
        <tr>
            <th scope="col" style="width: 7%">序号</th>
            <th scope="col" style="width: 14%">图片</th>
            <th scope="col" style="width: 12%">分类</th>
            <th scope="col" style="width: 10%">状态</th>
            <th scope="col" style="width: 24%">有效日期范围</th>
            <th scope="col" style="width: 10%">仅内部员工使用</th>
            <th scope="col" style="width: 10%">权重(越大越靠前)</th>
            <th scope="col" style="width: 14%">操作</th>
        </tr>
        </thead>
        <tbody>
        @foreach($list as $k => $item)
            <form id="{{ $item->form }}">
                <tr class="{{ $item->form }}">
                    <th scope="col" style="vertical-align: middle">{{$item->id}}<input type="hidden" value="{{$item->id}}" name="id"></th>
                    <td><img style="vertical-align: middle;height: 217.2px" src="{{$item->backgroundUrl}}" class="img-thumbnail" alt="图片加载失败"></td>
                    <td style="vertical-align: middle"  class="status">
                        <input type="text" class="form-control type" value="{{$item->type}}" aria-describedby="emailHelp" name="type">
                    </td>
                    <td style="vertical-align: middle"  class="status"><input value="1" name="status" class="mui-switch  mui-switch-anim" type="checkbox" {{$item->statusChecked}}></td>
                    <td style="vertical-align: middle">
                        <div class="input-group input-daterange">
                            <input type="text" class="form-control start-date-input" name="startDate" value="{{ $item->startDate }}">
                            <div class="input-group-addon"> ~ </div>
                            <input type="text" class="form-control end-date-input" name="endDate"  value="{{ $item->endDate }}">
                        </div>
                    </td>
                    <td style="vertical-align: middle"  class="status"><input value="1" name="isInternalUse" class="mui-switch  mui-switch-anim" type="checkbox" {{$item->isInternalUseChecked}}></td>
                    <td style="vertical-align: middle">
                        <input type="number" class="form-control sort" value="{{$item->sort}}" aria-describedby="emailHelp" name="sort">
                    </td>
                    <td style="vertical-align: middle">
                        <button type="button" class="btn btn-primary submit" data-id="{{$item->id}}">确认</button>
                        <button type="button" class="btn btn-danger delete" data-id="{{$item->id}}">删除</button>
                    </td>
                </tr>
            </form>
        @endforeach
        </tbody>
    </table>




</div>
<script>
    setTimeout(function () {
        $("#msg").hide();
        var file = $("#exampleFormControlFile1")
        file.after(file.clone().val(""));
        file.remove();
    },3000);
    // $('.mui-switch11').click(function (){
    //     let backgroundId = $(this).attr('value')
    //     console.log(backgroundId)
    //     $.ajax({
    //         url:'background/update',
    //         method:'POST',
    //         data:{
    //             backgroundId
    //         },
    //         dataType:'json',
    //         success:(d) => {
    //             window.location.reload()
    //         }
    //     })
    // })

    $('.submit').click(function (){
        let formData = {};
        let formId = 'form' + $(this).data('id')
        let t = $("#"+ formId +"").serializeArray();
        $.each(t, function() {
            formData[this.name] = this.value;
        });
        $.ajax({
            url:'background/update',
            method:'POST',
            data:{
                sort:JSON.stringify(formData.sort),
                type:JSON.stringify(formData.type),
                status:JSON.stringify(formData.status),
                backgroundId:JSON.stringify(formData.id),
                startDate:JSON.stringify(formData.startDate),
                endDate:JSON.stringify(formData.endDate),
                isInternalUse:JSON.stringify(formData.isInternalUse),
            },
            dataType:'json',
            success:(d) => {
                window.location.reload()
            }
        })
    })

    $('.announcement').click(function (){
        let announcement = $(".announcementName").val()
        $.ajax({
            url:'background/announcementSave',
            method:'POST',
            data:{
                announcement
            },
            dataType:'json',
            success:(d) => {
                alert('修改成功');
                window.location.reload()
            }
        })
    })

    $('.homeImg').click(function (){
        let homeImg = $(".homeImgValue").val()
        $.ajax({
            url:'homeImg/save',
            method:'POST',
            data:{
                homeImg
            },
            dataType:'json',
            success:(d) => {
                alert('修改成功');
                window.location.reload()
            }
        })
    })

    $('.detailImg').click(function (){
        let detailImg = $(".detailImgValue").val()
        $.ajax({
            url:'detailImg/save',
            method:'POST',
            data:{
                detailImg
            },
            dataType:'json',
            success:(d) => {
                alert('修改成功');
                window.location.reload()
            }
        })
    })

    $('.rule').click(function (){
        let rule = $(".ruleName").val()
        $.ajax({
            url:'background/ruleSave',
            method:'POST',
            data:{
                rule
            },
            dataType:'json',
            success:(d) => {
                alert('修改成功');
                window.location.reload()
            }
        })
    })

    $(".delete").click(function (){
        let id = $(this).data('id')
        let formId = 'form' + id
        console.log(formId)
        $("#"+ formId +"").remove();
        $("."+ formId +"").remove();
        $.ajax({
            url:'background/delete',
            method:'POST',
            data:{
                id
            },
            dataType:'json',
            success:(d) => {
                // window.location.reload()
            }
        })
    })

    // $(document).ready(
    //     function() {
    //         $(".sort1111").keydown(function(event) {
    //             if (event.keyCode == 13) {
    //                 let sort = ($(this).val() || 1)
    //                 let backgroundId = $(this).attr('data-value');
    //                 let startDate = $(this).parents('tr').find('.start-date-input').val();
    //                 let endDate = $(this).parents('tr').find('.end-date-input').val();
    //                 console.log(startDate);
    //                 $.ajax({
    //                     url:'background/update',
    //                     method:'POST',
    //                     data:{
    //                         sort,
    //                         backgroundId,
    //                         startDate,
    //                         endDate,
    //                     },
    //                     dataType:'json',
    //                     success:(d) => {
    //                         window.location.reload()
    //                     }
    //                 })
    //             }
    //         });
    //
    //     }
    // );

    $('.input-daterange input').each(function() {
        $(this).datepicker({
            language: 'zh-CN',
            format: 'yyyy-mm-dd'
        });
    });
</script>
</body>
</html>


